<template>
  <div>
    <van-nav-bar
      v-if="this.buttonadd==2"
      title="修改节目单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-nav-bar
      v-else
      title="新增节目单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="addInfo" @failed="onFailed">
      <van-field
        v-model="form.strUsername"
        name="strAppname"
        label="节目单名称"
        placeholder="节目单名称"
        :rules="[
          { required: true, message: '请填写节目单名称' },
          {pattern:/^[\u4E00-\u9FA5A-Za-z0-9]+$/,message:'请不要输入特殊符号'}
        ]"
      />
      <van-field
        readonly
        v-model="form.strOrgname"
        name="strParorgnum"
        label="所属机构"
        placeholder="选择所属机构"
        @click="checkOrgs"
        :rules="[{ required: true, message: '选择所属机构' }]"
      />
      <van-popup v-model="show">
        <div class="container">
          <van-search
            show-action
            placeholder="请输入机构名称"
          >
            <template #action>
              <div>搜索</div>
            </template>
          </van-search>
          <div class="list-container">
            <div class="section">
              <p v-if="listData.length===0" class="yyp">
                <van-empty description="暂无数据~"/>
              </p>
              <van-swipe-cell v-else>
                <van-radio-group v-model="refApp">
                  <van-radio v-for="(item,index) in listData" :name="item" :key="index">
                    <div class="yycard">
                      <div class="yycard_p">
                        <p>{{item.strOrgname}}</p>
                      </div>
                    </div>
                  </van-radio>
                </van-radio-group>
              </van-swipe-cell>
            </div>
            <div class="bottom">
              <div v-if="listData.length>0" type="primary" class="addbtn" block @click="submitcheck()">添加</div>
            </div>
          </div>
        </div>
      </van-popup>
      <van-field
        readonly
        clickable
        label="节目单类型"
        :value="value"
        placeholder="选择节目单类型"
        @click="showPicker = true"
        :rules="[{ required: true, message: '选择节目单类型' }]"
      />

      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          title="节目单类型"
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <!--设备列表-->
      <van-field
        v-if="form.iUrgent ===1"
        v-model="form.strDevicename"
        label="设备列表"
        placeholder="选择设备列表"
        @click="deviceOrgs"
        :rules="[{ required: true, message: '选择设备列表' }]"
      />
      <van-popup v-model="deviceshow">
        <p class="week">播放周期选择</p>
        <div class="container">
          <div class="list-container">
            <p v-if="this.deviceList.length===0" style="font-size: 14px;text-align: center;">暂无数据~</p>
            <div v-else class="section">
              <van-swipe-cell>
                <van-checkbox-group v-model="deviceApp">
                  <van-checkbox shape="square" v-for="(item,index) in deviceList" :name="item" :key="index">
                    <div class="yycard">
                      <div class="yycard_p">
                        <p>{{item.strDevicename}}</p>
                      </div>
                    </div>
                  </van-checkbox>
                </van-checkbox-group>
              </van-swipe-cell>
            </div>
            <div class="bottom">
              <div type="primary" class="addbtn" block @click="submitdevice()">确定</div>
            </div>
          </div>
        </div>
      </van-popup>

      <van-field
        readonly
        clickable
        label="开始日期"
        :value="dateStart"
        placeholder="选择日期"
        @click="showStart = true"
        :rules="[{ required: true, message: '选择日期' }]"
      />
      <van-calendar v-model="showStart" :show-confirm="false" @confirm="onConfirmStartData"/>
      <van-field
        readonly
        clickable
        label="结束日期"
        :value="dateEnd"
        placeholder="选择日期"
        @click="showEnd = true"
        :rules="[{ required: true, message: '选择日期' }]"
      />
      <van-calendar v-model="showEnd" :show-confirm="false" @confirm="onConfirmEndData"/>
      <van-field
        v-model="form.strCycle"
        label="播放周期"
        placeholder="选择播放周期"
        @click="weekOrgs"
        :rules="[{ required: true, message: '选择播放周期' }]"
      />
      <van-popup v-model="weekshow">
        <p class="week">播放周期选择</p>
        <div class="container">
          <div class="list-container">
            <div class="section">
              <van-swipe-cell>
                <van-checkbox-group v-model="weekApp">
                  <van-checkbox shape="square" v-for="(item,index) in weekList" :name="item" :key="index">
                    <div class="yycard">
                      <div class="yycard_p">
                        <p>{{item}}</p>
                      </div>
                    </div>
                  </van-checkbox>
                </van-checkbox-group>
              </van-swipe-cell>
            </div>
            <div class="bottom">
              <div type="primary" class="addbtn" block @click="submitweek()">确定</div>
            </div>
          </div>
        </div>
      </van-popup>
      <!--上午开始时间段-->
      <van-field
        readonly
        clickable
        label="上午时间段"
        :value="amStartvalue"
        :index="index"
        placeholder="选择开始时间段"
        @click="amStartshowPicker = true"
      />
      <van-popup v-model="amStartshowPicker" round position="bottom">
        <van-picker
          title="上午开始时间段"
          show-toolbar
          :columns="amStartcolumns"
          @cancel="amStartshowPicker = false"
          @confirm="amStartonConfirm"
        />
      </van-popup>
      <!--上午结束时间段-->
      <van-field
        readonly
        clickable
        style="color: #fff"
        label="结束时间段"
        :value="amEndvalue"
        :index="index"
        placeholder="选择结束时间段"
        @click="amEndshowPicker = true"
      />
      <van-popup v-model="amEndshowPicker" round position="bottom">
        <van-picker
          title="上午结束时间段"
          show-toolbar
          :columns="amEndcolumns"
          @cancel="amEndshowPicker = false"
          @confirm="amEndonConfirm"
        />
      </van-popup>
      <!--下午开始时间段-->
      <van-field
        readonly
        clickable
        label="下午时间段"
        :value="pmStartvalue"
        placeholder="选择开始时间段"
        @click="pmStartshowPicker = true"
      />
      <van-popup v-model="pmStartshowPicker" round position="bottom">
        <van-picker
          title="下午开始时间段"
          show-toolbar
          :columns="pmStartcolumns"
          @cancel="pmStartshowPicker = false"
          @confirm="pmStartonConfirm"
        />
      </van-popup>
      <!--下午结束时间段-->
      <van-field
        readonly
        clickable
        style="color: #fff"
        label="下午时间段"
        :value="pmEndvalue"
        placeholder="选择结束时间段"
        @click="pmEndshowPicker = true"
      />
      <van-popup v-model="pmEndshowPicker" round position="bottom">
        <van-picker
          title="下午开始时间段"
          show-toolbar
          :columns="pmEndcolumns"
          @cancel="pmEndshowPicker = false"
          @confirm="pmEndonConfirm"
        />
      </van-popup>
      <van-field
        class="yycard_btn"
        label="添加素材"
        @click="programMaterial"
      />
      <div>
        <div class="section section2">
          <p v-if="Materialist.length===0" class="yyp">
            <van-empty description="暂无数据~"/>
          </p>
          <van-swipe-cell>
            <van-checkbox-group v-model="MaterialApps">
              <van-checkbox shape="square" v-for="(item,index) in newMArr" :name="index" :key="index">
                <div class="yycard yycard2">
                  <div class="yycard_p">
                    <p class="yycard_title">{{item.strMaterialname}}</p>
                    <p>格式：{{item.typeName}}</p>
                    <p>类型：{{item.strMaterialdetailName}}</p>
                    <p>创建时间：{{item.strCreatetime}}</p>
                  </div>
                </div>
              </van-checkbox>
            </van-checkbox-group>
          </van-swipe-cell>
        </div>
        <!--素材弹框-->
        <van-popup v-model="SearchMaterialshow">
          <div class="container">
            <van-search
              show-action
              placeholder="请输入机构名称"
            >
              <template #action>
                <div>搜索</div>
              </template>
            </van-search>
            <div class="list-container">
              <div class="section">
                <van-swipe-cell>
                  <van-checkbox-group v-model="MaterialApp">
                    <van-checkbox shape="square" v-for="(item,index) in Materialist" :name="item" :key="index">
                      <div class="yycard">
                        <div class="yycard_p">
                          <p class="yycard_title">{{item.strMaterialname}}</p>
                          <p>格式：{{item.typeName}}</p>
                          <p>类型：{{item.strMaterialdetailName}}</p>
                          <p>创建时间：{{item.strCreatetime}}</p>
                        </div>
                      </div>
                    </van-checkbox>
                  </van-checkbox-group>
                </van-swipe-cell>
              </div>
              <div class="bottom">
                <div type="primary" class="addbtn" block @click="Msubmitweek()">确定</div>
              </div>
            </div>
          </div>
        </van-popup>
        <div class="bottom2">
          <van-button v-if="buttonadd===1" type="primary" style="margin: 0.53333rem" native-type="submit">新增确认
          </van-button>
          <!--<van-button v-else type="primary" style="margin: 0.53333rem">修改确认</van-button>-->
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
  import {addprogramme, getPMaterialList, getdeviceOrg} from '../../api/programme'
  import {getOrgList} from '../../api/commonapi'
  import axios from 'axios'
  import {Toast} from "vant";

  export default {
    name: 'addApplication',
    data() {
      return {
        buttonadd: '',
        value: '',
        index: '',
        showPicker: false,
        show: false,
        dateStart: '',    //开始日期存储
        dateEnd: '',       //结束时间存储
        showStart: false,   //开始时间日历
        showEnd: false,     //结束时间日历
        weekshow: false, //播放周期
        amStartvalue: '',     //上午开始时间段存储
        amEndvalue: '',       //上午结束时间段存储
        amStartshowPicker: false,  //上午开始时间段弹框
        amEndshowPicker: false,  //上午结束时间段弹窗
        pmStartvalue: '',      //下午开始时间段存储
        pmEndvalue: '',      //下午结束时间段存储
        pmStartshowPicker: false,  //上午开始时间段弹框
        pmEndshowPicker: false,  //下午结束时间段弹框
        amStartcolumns: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
        amEndcolumns: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
        pmStartcolumns: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
        pmEndcolumns: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
        columns: ['普通', '紧急'],
        deviceshow: false,
        deviceApp: [], //设备列表存储
        deviceList: [], //遍历设备列表
        listData: [],  //机构数据
        /*MaterialData: [], //素材
        SearchMaterial: [],//搜索素材*/
        SearchMaterialshow: false, //素材弹窗初始隐藏
        Materialist: [],  //遍历素材存储
        refApp: [],   //机构存储
        weekApp: [],  //星期存储
        newMArr: [],   //新增节目单页面素材数据存储
        MaterialApp: [], //弹窗中选择素材存储到一个数组
        MaterialApps: [], //新增节目单页面,选定之后的存储勾选状态
        weekList: [
          '星期日',
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六'
        ],
        iOrgsysnum: localStorage.getItem('iOrgsysnum'), //用户所属机构编号
        //搜索
        searchform: {
          iOrgname: '',
          iOrgsysnum: localStorage.getItem('iOrgsysnum')
        },
        //新增节目单中素材搜索
        searchMaterialform: {
          strMaterialname: '',
          iOrgsysnum: localStorage.getItem('iOrgsysnum'),
          iFlag: 1
        },
        form: {
          strUsername: '',
          iOrgsysnum: '',
          iUrgent: '',
          strCycle: '',
          strOrgname: '',
          strStartdate: '',
          strEnddate: '',
          strCycleStartdata: '',
          strCycleEnddata: '',
          strCycleStarttime: '',
          strCycleEndtime: '',
          strOperator: localStorage.getItem('iUsersysnum'),
          deviceType: 1,
          materialList: [],
          strDevicename: '',
          iDevicesysnumArr: []
        }
      }
    },
    created() {
      //buttonadd = 1 新增;buttonadd = 2 修改
      this.buttonadd = JSON.parse(this.$route.query.buttonadd)
    },
    methods: {
      //头部返回
      onClickLeft() {
        this.$router.go(-1)
      },

      //头部右边按钮
      onClickRight() {
        Toast('按钮')
      },

      //普通/紧急
      onConfirm(value, index) {
        this.value = value;
        this.index = index;
        this.form.iUrgent = this.index
        let newObj = Object.assign(this.form.iUrgent, this.form)
        this.showPicker = false;
      },

      //设备列表
      deviceOrgs() {
        if (this.form.strOrgname != '') {
          getdeviceOrg({iOrgsysnum: this.form.iOrgsysnum}).then(res => {
            this.deviceshow = true
            this.deviceList = res.deviceList
          })
        } else {
          Toast('请先选择机构')
        }
      },

      //设备列表弹窗确认按钮
      submitdevice() {
        let strDevicename = []
        let iDevicesysnumArr = []
        this.deviceApp.forEach((item) => {
          strDevicename.push(item.strDevicename)
          iDevicesysnumArr.push(item.iDevicesysnum)
        })
        this.form.strDevicename = strDevicename.join(',')
        this.form.iDevicesysnumArr = iDevicesysnumArr
        this.deviceshow = false
      },

      //上午开始时间段确认按钮
      amStartonConfirm(value) {
        this.amStartvalue = value;
        this.form.strCycleStartdata = this.amStartvalue   //赋值传值
        this.amStartshowPicker = false;
      },
      //上午结束时间段确认按钮
      amEndonConfirm(value) {
        this.amEndvalue = value;
        this.form.strCycleEnddata = this.amEndvalue       //赋值传值
        this.amEndshowPicker = false;
      },
      //下午开始时间段确认按钮
      pmStartonConfirm(value) {
        this.pmStartvalue = value;
        this.form.strCycleStarttime = this.pmStartvalue   //赋值传值
        this.pmStartshowPicker = false;
      },
      //下午结束时间段确认按钮
      pmEndonConfirm(value) {
        this.pmEndvalue = value;
        this.form.strCycleEndtime = this.pmEndvalue       //赋值传值
        this.pmEndshowPicker = false;
      },
      //范围机构弹窗
      checkOrgs() {
        this.show = true;
        this.fetchData()
      },

      //播放周期
      weekOrgs() {
        this.weekshow = true
      },

      //获取机构数据
      fetchData() {
        getOrgList(this.searchform).then(res => {
          this.listData = res.orgList
        })
      },

      //日历
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      },

      //开始日期
      onConfirmStartData(date) {
        this.showStart = false;
        this.dateStart = this.formatDate(date);
        this.form.strStartdate = this.dateStart   //赋值传值
      },
      //结束日期
      onConfirmEndData(date) {
        this.showEnd = false;
        this.dateEnd = this.formatDate(date);
        this.form.strEnddate = this.dateEnd      //赋值传值
      },

      //机构编号
      submitcheck() {
        this.form.strOrgname = this.refApp.strOrgname
        this.form.iOrgsysnum = this.refApp.iOrgsysnum
        console.log('>>>>', typeof this.form.iOrgsysnum)
        this.show = false
      },

      //播放周期
      submitweek() {
        let strCycle = []
        this.weekApp.forEach((item, index) => {
          strCycle.push(item)
        })
        this.form.strCycle = strCycle.join(',')
        this.weekshow = false
      },
      //新增节目单
      addInfo() {
        addprogramme(this.form).then(res => {
          this.$router.push({
            path: 'list'
          })
        })
      },

      //失败
      onFailed(errorInfo) {
        console.log('failed', errorInfo)
      },
      //由新增节目单页面跳转到节目单中的素材
      programMaterial() {
        this.SearchMaterialshow = true
        this.getMarrialList()
      },
      //新增节目单中获取素材
      getMarrialList() {
        getPMaterialList(this.searchMaterialform).then(res => {
          this.Materialist = res.result
        })
      },

      //弹窗素材中的确认按钮
      Msubmitweek() {
        let checkArrs = []  //将弹窗中所选择的素材数据塞到新增节目单显示的素材区域
        this.MaterialApp.forEach((item, index) => {     //MaterialApp意思是弹窗中选中的数据存到的数组里
          checkArrs.push(item)
        })
        this.newMArr = checkArrs
        this.form.materialList = JSON.stringify(this.newMArr)
        console.log(typeof this.form.materialList)
        checkArrs.forEach((item, index) => {
          this.MaterialApps.push(index)
        })
        this.SearchMaterialshow = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  /*机构弹窗里样式*/
  .container {
    height: 100%;

    .list-container {
      display: flex;
      flex-direction: column;

      .section {
        flex: 1;
        height: 280px;
        max-height: 280px;
        overflow: auto;
        padding-bottom: 10px;
      }

      .bottom {
        flex: 1;
        display: flex;
        justify-content: center;
        align-content: center;
        position: fixed;
        bottom: 16px;
        left: 0;
        width: 100%;
        background: #fafafa;

        .van-button {
          width: 90%;
        }
      }
    }
  }

  .yyp {
    text-align: center;
    font-size: 14px;
    color: #8c8a8a;
    line-height: 2;
  }

  .yycard {
    display: flex;
    border-bottom: 1px solid whitesmoke;
    padding: 5px 0;
    margin-left: 20px;
    width: 300px;
    height: 35px;
    align-items: center;
  }

  .yycard {
    height: auto;
  }

  .yyimg {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: #F5F7FA;
  }

  .yycard_p {
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    padding-left: 10px;
    color: #6b6b6b;
  }

  .yycard_title {
    font-size: 14px;
    color: #000;
  }

  .van-button--primary {
    background-color: #0c1b35;
    border-color: #0c1b35;
    border-radius: 4px;
    width: 90%;
    margin: 20px;
  }

  .van-button--danger {
    height: 100%;
  }

  .delete-button2 {
    background-color: #6b6b6b;
    border: 1px solid #6b6b6b;
  }

  /deep/ .van-search__content {
    border-radius: 20px;
    background-color: #e7e9ec;
  }

  /deep/ .van-checkbox__icon {
    position: relative;
    left: 25px;
  }

  .ellipsisp {
    width: 300px;
  }

  /*详情页面样式*/
  .uploadImg {
    display: flex;
    padding: 16px;
    align-items: center;
    align-self: start;
    justify-content: space-around;

    span {
      flex: 1;
      font-size: 14px;
    }
  }

  .van-uploader__wrapper {
    flex-wrap: nowrap;
  }

  /deep/ .van-button--primary {
    color: #fff;
    background-color: #0c1b35;
    border: 0.02667rem solid #0c1b35;
    border-radius: 4px;
    height: 40px;
    width: 90%;
    margin: 0 20px 3px 20px;
  }

  /deep/ .van-popup--center {
    top: 30%;
    left: 0;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    height: 100%;
  }

  .addbtn {
    color: #fff;
    background-color: #0c1b35;
    border: 0.02667rem solid #0c1b35;
    border-radius: 0.10667rem;
    width: 90%;
    margin: 0 0.53333rem 0.08rem 0.53333rem;
    text-align: center;
    font-size: 16px;
    padding: 10px 0;
  }

  /deep/ .van-popup--bottom.van-popup--round {
    border-radius: 0;
  }

  /deep/ .van-radio__icon {
    position: relative;
    left: 28px;
  }

  .week {
    text-align: center;
    font-size: 16px;
    height: 70px;
    line-height: 57px;
  }

  /deep/ .yycard_btn .van-field__label {
    background: #0c1b35;
    color: #fff;
    width: auto;
    padding: 0 5px;
    border-radius: 4px;
  }

  .section2 {
    height: 500px;
    overflow: hidden;
    margin-bottom: 35px;
  }

  .bottom2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    position: fixed;
    left: 0;
    width: 100%;
    background: #fafafa;
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    width: 100%
  }

</style>
